<template>
    <view>
        <block name="vote">
            <block v-if="vote.vote_downtime_status == 4">
                <view class="rang_wrap" v-if="rank_data.length > 0">
                    <view class="rang_item rang_item1">
                        <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank2.png"></image>
                        <view class="rank_head">
                            <image class="rang_uhead" mode="widthFix" :src="rank_data[1]['pic']"></image>
                        </view>
                        <view class="rang_name">{{ rank_data[1]['name'] }}</view>
                        <view class="rang_vote_count">{{ rank_data[1]['votes'] }}</view>
                        <!-- <view class="rang_no">编号：{{rank_data[1]['sort']}}</view> -->
                    </view>
                    <view class="rang_item rang_item2" :style="'background-color:' + themeColor.vrl.bg + ';'">
                        <view class="left_wing" :style="'border-color:' + themeColor.vrl.top_three.wing + ' transparent transparent;'"></view>
                        <view class="right_wing" :style="'border-color:' + themeColor.vrl.top_three.wing + ' transparent transparent;'"></view>
                        <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank1.png"></image>
                        <view class="rank_head">
                            <image class="rang_uhead" mode="widthFix" :src="rank_data[0]['pic']"></image>
                        </view>
                        <view class="rang_name">{{ rank_data[0]['name'] }}</view>
                        <view class="rang_vote_count">{{ rank_data[0]['votes'] }}</view>
                        <!-- <view class="rang_no">编号：{{rank_data[0]['sort']}}</view> -->
                    </view>
                    <view class="rang_item rang_item3" :style="'background-color:' + themeColor.vrl.bg + ';'">
                        <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank3.png"></image>
                        <view class="rank_head">
                            <image class="rang_uhead" mode="widthFix" :src="rank_data[2]['pic']"></image>
                        </view>
                        <view class="rang_name">{{ rank_data[2]['name'] }}</view>
                        <view class="rang_vote_count">{{ rank_data[2]['votes'] }}</view>
                        <!-- <view class="rang_no">编号：{{rank_data[2]['sort']}}</view> -->
                    </view>
                </view>
                <view class="user_rang t_c h4" v-if="rank_data.length > 2">
                    <view class="rang_row fl w_100">
                        <view class="w_25">排名</view>
                        <!-- <view class="w_20" style="height: 100rpx;">编号</view> -->
                        <view class="w_55">姓名</view>
                        <view class="w_20">人气数</view>
                    </view>
                    <view class="rang_row fl w_100" v-if="index > 2" v-for="(item, index) in rank_data" :key="index">
                        <view class="w_25">
                            <image class="rang_three" :src="'../../resource/images/order_ico/icon-' + (index + 1) + '@2x.png'" v-if="index + 1 > 3 && index + 1 <= 10"></image>
                            <text class="rang_num rad_3" v-else-if="index + 1 > 10">{{ index + 1 }}</text>
                        </view>

                        <!-- <view class="w_20">{{item.sort}}</view> -->

                        <view class="w_55 w_space">{{ item.name }}</view>

                        <view class="w_20">{{ item.votes }}</view>
                    </view>
                </view>
                <view v-if="rank_data.length > 9">
                    <view class="load_tip" v-if="!(rank_load === false ? false : true)">- 暂无更多数据 -</view>
                    <view class="load_tip" v-if="!(rank_load === true ? false : true)">- 上拉加载 -</view>
                    <view class="load_icon w_100 t_c" v-if="vote_load === 2">
                        <image :lazyLoad="true" mode="aspectFill" src="/static/wxz_wzbagent/resource/images/load.gif"></image>
                    </view>
                </view>
            </block>
            <block v-else>
                <view class="vote_total_nums" v-if="live.ljrq_status == 1 || columnsurs.special" :style="'background-color:' + color_one + ';color:' + color_three + ';'">
                    <view class="h4" v-if="columnsurs.special">
                        {{ columnsurs.special }}
                    </view>
                    <view class="vote_num_item" v-if="live.ljrq_status == 1 && live.ljrq_show_type == 0">
                        <view class="vote_num_title h4" :style="'color:' + color_three + ';'">参与选手</view>
                        <view class="vote_num_value" :style="'color:' + color_three + ';'">{{ live.vote_totle_count[0].counts }}</view>
                    </view>
                    <view class="vote_num_item" v-if="live.ljrq_status == 1 && live.ljrq_show_type == 0">
                        <view class="vote_num_title h4" :style="'color:' + color_three + ';'">累计人气值</view>
                        <view class="vote_num_value" :style="'color:' + color_three + ';'">{{ live.vote_totle_nums[0].nums }}</view>
                    </view>
                    <view class="vote_num_item" v-if="live.ljrq_status == 1 && live.ljrq_show_type == 0">
                        <view class="vote_num_title h4" :style="'color:' + color_three + ';'">访问量</view>
                        <view class="vote_num_value" :style="'color:' + color_three + ';'">{{ live.viewer_count }}</view>
                    </view>
                </view>
                <view class="search" :style="'border: ' + (color_one ? '2rpx solid ' + color_one : '') + ';'" v-if="vote.hide_search_box != 1">
                    <form @submit="votesearch">
                        <input
                            @input="search"
                            :placeholder="live.id == 8637 ? '请输入节目编号' : '请输入姓名或选手编号'"
                            value=""
                            :placeholder-style="'color:' + color_one + ';'"
                            :style="'color:' + color_one + ';background-color: ' + color_three + ';'"
                            v-if="color_status == '1'"
                        />
                        <input
                            @input="search"
                            :placeholder="live.id == 8637 ? '请输入节目编号' : '请输入姓名或选手编号'"
                            value=""
                            placeholder-class="phcolor"
                            :style="'color:' + color_one + ';background-color: ' + color_three + ';'"
                            v-else
                        />
                        <view @tap="votesearch" class="search_icon" :style="'background-color:' + color_three + ';'">
                            <text class="iconfont icon-sousuo" :style="'color:' + (color_one ? color_one : '#fff;')"></text>
                        </view>
                    </form>
                </view>
                <view v-else-if="vote.hide_search_box == 1" style="margin-top: 8px"></view>
                <view :class="'vote_tab ' + themes" v-if="is_vote_tab != 0">
                    <view
                        @tap="bindvotetab"
                        :class="'vote_tab_item ' + (columnsurs_selected == 'card1' ? 'selected' : '')"
                        data-type="card1"
                        :style="
                            'color:' +
                            (columnsurs_selected == 'card1' ? color_three : color_one) +
                            ';background-color:' +
                            (columnsurs_selected == 'card1' ? color_one : color_three) +
                            ';border:' +
                            (columnsurs_selected == 'card1' ? 0 : '2rpx solid ' + color_one)
                        "
                    >
                        <view class="vote_tab_type">
                            <text>{{ columnsurs.card1 }}</text>
                        </view>
                    </view>
                    <view
                        @tap="bindvotetab"
                        v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                        :class="'vote_tab_item ' + (columnsurs_selected == 'card2' ? 'selected' : '') + ' card2'"
                        data-type="card2"
                        :style="
                            'color:' +
                            (columnsurs_selected == 'card2' ? color_three : color_one) +
                            ';background-color:' +
                            (columnsurs_selected == 'card2' ? color_one : color_three) +
                            ';border:' +
                            (columnsurs_selected == 'card2' ? 0 : '2rpx solid ' + color_one)
                        "
                    >
                        <view class="vote_tab_type">
                            <text>{{ columnsurs.card2 }}</text>
                        </view>
                    </view>
                    <view
                        @tap="bindvotetab"
                        :class="'vote_tab_item ' + (columnsurs_selected == 'card3' ? 'selected' : '')"
                        data-type="card3"
                        :style="
                            'margin-left: ' +
                            ((vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0 ? '0px' : '8px') +
                            ';color:' +
                            (columnsurs_selected == 'card3' ? color_three : color_one) +
                            ';background-color:' +
                            (columnsurs_selected == 'card3' ? color_one : color_three) +
                            ';border:' +
                            (columnsurs_selected == 'card3' ? 0 : '2rpx solid ' + color_one)
                        "
                    >
                        <view class="vote_tab_type">
                            <text>{{ columnsurs.card3 }}</text>
                        </view>
                    </view>
                </view>

                <view class="vote_nums" :style="'display:block;color:' + color_three + ';background-color:' + color_one + ';' + (live.id == 6387 ? 'padding:50rpx 0' : '')">
                    <view class="vote_num_item" style="width: 100%" v-if="live.tou_djs_status == 1">
                        <view class="vote_num_title" v-if="vote.vote_downtime_status && !live.tou_djs_text" :style="'color:' + color_three + ';'">
                            {{ vote.vote_downtime_status == 1 ? '距离投票开始' : vote.vote_downtime_status == 2 ? '距离投票结束' : '投票已结束' }}
                        </view>
                        <view class="vote_num_title" v-if="live.tou_djs_text" :style="'color:' + color_three + ';'">{{ live.tou_djs_text }}</view>
                        <view class="vote_num_value time" style="font-size: 25rpx">
                            {{ vote.vote_downtime_status != 3 ? vote_downtime.day : '00' }}
                            <text style="margin: 0 22rpx">天</text>
                            {{ vote.vote_downtime_status != 3 ? vote_downtime.hour : '00' }}
                            <text style="margin: 0 22rpx">时</text>
                            {{ vote.vote_downtime_status != 3 ? vote_downtime.minute : '00' }}
                            <text style="margin: 0 22rpx">分</text>
                            {{ vote.vote_downtime_status != 3 ? vote_downtime.second : '00' }}
                            <text style="margin: 0 22rpx">秒</text>
                        </view>
                    </view>
                    <view style="display: flex" v-if="live.ljrq_status == 1 && live.ljrq_show_type == 1">
                        <view class="vote_num_item">
                            <view class="vote_num_title h4" :style="'display: inline-block;color:' + color_three + ';'">参与选手　</view>
                            <view class="vote_num_value" :style="'display: inline-block;color:' + color_three + ';'">{{ live.vote_totle_count[0].counts }}</view>
                        </view>
                        <view class="vote_num_item">
                            <view class="vote_num_title h4" :style="'display: inline-block;color:' + color_three + ';'">累计人气值　</view>
                            <view class="vote_num_value" :style="'display: inline-block;color:' + color_three + ';'">{{ live.vote_totle_nums[0].nums }}</view>
                        </view>
                        <view class="vote_num_item">
                            <view class="vote_num_title h4" :style="'display: inline-block;color:' + color_three + ';'">访问量　</view>
                            <view class="vote_num_value" :style="'display: inline-block;color:' + color_three + ';'">{{ live.viewer_count }}</view>
                        </view>
                    </view>
                </view>

                <view v-if="columnsurs_selected == 'card1'">
                    <view class="user_all">
                        <view
                            class="user_item h4"
                            v-if="item.id"
                            :style="'border: ' + (color_one ? '2rpx solid ' + color_one : '') + ';border-radius: 8rpx;'"
                            v-for="(item, index) in vote_data"
                            :key="index"
                        >
                            <navigator hoverClass="none" :url="'/wxz_wzbagent/pages/vote/vote_info?xuan_id=' + item.id + '&token=' + live.token">
                                <view class="user_no t_c t_white h5" v-if="is_vote_num != 0">
                                    <image src="/static/wxz_wzbagent/resource/images/icon_5.png"></image>
                                    <view>{{ item.sort }}号</view>
                                </view>
                                <view class="team_name" v-if="item.team_name" :style="'color:' + color_three + ';background-color:' + color_one + ';'">
                                    {{ item.team_name }}
                                </view>
                                <view
                                    class="team_name"
                                    v-if="item.mechanism_name && (item.live_id == '2058' || item.live_id == '2045' || item.live_id == '2044' || item.live_id == '2043')"
                                    :style="'color:' + color_three + ';background-color:' + color_one + ';'"
                                >
                                    {{ item.mechanism_name }}
                                </view>
                                <view class="vote_photo">
                                    <view class="rank_num" v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0">
                                        <image class="rank_num_bg" src="/static/wxz_wzbagent/resource/images/icon36.png"></image>
                                        <view class="rank_txt">
                                            排名:
                                            <text class="rank_spot" style="font-weight: bold">{{ index + 1 }}</text>
                                        </view>
                                    </view>
                                    <image class="user_img" :lazyLoad="true" mode="aspectFill" :src="item.pic"></image>
                                </view>
                                <view class="user_nick" :style="'color:' + color_one + ';'">
                                    <view class="w_space fl" style="font-weight: bold">{{ item.name }}</view>
                                    <view class="w_space fr t_r" v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0">
                                        {{ item.votes }}{{ columnsurs.zan }}
                                    </view>
                                </view>
                            </navigator>

                            <view
                                @tap="bindopenvote"
                                v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                                class="user_btn"
                                :data-xuan_id="item.id"
                                :data-xuan_name="item.name"
                                :data-index="index"
                                :style="'color:' + color_three + ';background-color:' + color_one + ';'"
                            >
                                {{ columnsurs.award ? columnsurs.award : '打call' }}
                                <!-- <image class="btn_icon_src" src="{{'../../resource/images/icon2.png'}}"></image> -->
                            </view>
                        </view>
                    </view>
                    <view v-if="vote_data.length > 9">
                        <view class="load_tip" v-if="!(vote_load === false ? false : true)">- 暂无更多数据 -</view>
                        <view class="load_tip" v-if="!(vote_load === true ? false : true)">- 上拉加载 -</view>
                        <view class="load_icon w_100 t_c" v-if="vote_load == 2">
                            <image :lazyLoad="true" mode="aspectFill" src="/static/wxz_wzbagent/resource/images/load.gif"></image>
                        </view>
                    </view>
                </view>
                <!-- 排行榜 -->
                <view v-if="columnsurs_selected == 'card2'">
                    <view class="rang_wrap" v-if="rank_data.length > 0">
                        <view class="rang_item rang_item1">
                            <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank2.png"></image>
                            <view class="rank_head">
                                <image class="rang_uhead" mode="widthFix" :src="rank_data[1]['pic']"></image>
                            </view>
                            <view class="rang_name">{{ rank_data[1]['name'] }}</view>
                            <view class="rang_vote_count">{{ rank_data[1]['votes'] }}</view>
                            <view class="rang_no">编号：{{ rank_data[1]['sort'] }}</view>
                        </view>
                        <view class="rang_item rang_item2" :style="'background-color:' + themeColor.vrl.bg + ';'">
                            <view class="left_wing" :style="'border-color:' + themeColor.vrl.top_three.wing + ' transparent transparent;'"></view>
                            <view class="right_wing" :style="'border-color:' + themeColor.vrl.top_three.wing + ' transparent transparent;'"></view>
                            <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank1.png"></image>
                            <view class="rank_head">
                                <image class="rang_uhead" mode="widthFix" :src="rank_data[0]['pic']"></image>
                            </view>
                            <view class="rang_name">{{ rank_data[0]['name'] }}</view>
                            <view class="rang_vote_count">{{ rank_data[0]['votes'] }}</view>
                            <view class="rang_no">编号：{{ rank_data[0]['sort'] }}</view>
                        </view>
                        <view class="rang_item rang_item3" :style="'background-color:' + themeColor.vrl.bg + ';'">
                            <image class="rang_icon" src="/static/wxz_wzbagent/resource/images/order_ico/rank3.png"></image>
                            <view class="rank_head">
                                <image class="rang_uhead" mode="widthFix" :src="rank_data[2]['pic']"></image>
                            </view>
                            <view class="rang_name">{{ rank_data[2]['name'] }}</view>
                            <view class="rang_vote_count">{{ rank_data[2]['votes'] }}</view>
                            <view class="rang_no">编号：{{ rank_data[2]['sort'] }}</view>
                        </view>
                    </view>
                    <view class="user_rang t_c h4" v-if="rank_data.length > 2">
                        <view class="rang_row fl w_100">
                            <view class="w_15">排名</view>
                            <view class="w_20" style="height: 100rpx">编号</view>
                            <view class="w_45">姓名</view>
                            <view class="w_20">人气数</view>
                        </view>
                        <view class="rang_row fl w_100" v-if="index > 2" v-for="(item, index) in rank_data" :key="index">
                            <view class="w_15">
                                <image class="rang_three" :src="'../../resource/images/order_ico/icon-' + (index + 1) + '@2x.png'" v-if="index + 1 > 3 && index + 1 <= 10"></image>
                                <text class="rang_num rad_3" v-else-if="index + 1 > 10">{{ index + 1 }}</text>
                            </view>

                            <view class="w_20">{{ item.sort }}</view>

                            <view class="w_45 w_space">{{ item.name }}</view>

                            <view class="w_20">{{ item.votes }}</view>
                        </view>
                    </view>
                    <view v-if="rank_data.length > 9">
                        <view class="load_tip" v-if="!(rank_load === false ? false : true)">- 暂无更多数据 -</view>
                        <view class="load_tip" v-if="!(rank_load === true ? false : true)">- 上拉加载 -</view>
                        <view class="load_icon w_100 t_c" v-if="vote_load === 2">
                            <image :lazyLoad="true" mode="aspectFill" src="/static/wxz_wzbagent/resource/images/load.gif"></image>
                        </view>
                    </view>
                </view>
                <!-- 规则描述 -->
                <view v-if="columnsurs_selected == 'card3'">
                    <view class="page-dec">
                        <!-- <template is="wxParse" :data="wxParseData:intro_content.nodes"></template> -->
                        <mp-html :content="article_intro_content"></mp-html>
                    </view>
                </view>
                <!-- <view hidden="{{!(menu_select_data.type=='vote-user-show')}}">
        <view class="user_all">
            <view class="user_item h4" style="background-color:{{themeColor.vus.lists.bg}};{{themeColor.vul.lists.border?'border:1px solid '+themeColor.vul.lists.border:''}}" wx:for="{{data}}" wx:key="index">
                <navigator hoverClass="none" url="/pages/member/index?token={{token}}&id={{item.id}}&vote_id={{menu_select_data.id}}&vote_user_type={{menu_select_data.vote_user_type}}&type={{menu_select_data.type}}">
                    <view class="user_no t_c t_white h5" wx:if="{{item.no}}">
                        <image src="../../statics/image/icon_5.png"></image>
                        <view>{{item.no}}</view>
                    </view>
                    <view style="height:{{vote_detail.post_json.setting.show_template==2?'230rpx':'410rpx'}};width:345rpx;overflow:hidden;position:relative;">
                        <view class="member_rank" style="background: url(../../statics/image/icon36.png) no-repeat;" wx:if="{{item.team_title}}">
                          {{item.team_title}}
                        </view>
                        <image class="user_img" lazyLoad="true" mode="widthFix" src="{{item.image}}"></image>
                    </view>
                    <view class="user_nick" style="color:{{themeColor.vus.lists.txt1}};text-align:center;font-size:28rpx;">
                        <view class="teacher_name" vText="item.name">{{item.name}}</view>
                        <view class="teacher_dianji" wx:if="{{vote_detail.post_json.setting.show_vote_user_view_cnt!=2}}">
                            <text class="iconfont icon-dianji3"></text>
                        {{item.view_cnt||0}}
                      </view>
                    </view>
                </navigator>
            </view>
        </view>
        <view>
            <view class="load_tip" hidden="{{load===false?false:true}}">- 暂无更多数据 -</view>
            <view class="load_tip" hidden="{{load===true?false:true}}">- 上拉加载 -</view>
            <view class="load_icon w_100 t_c" hidden="{{load!=2}}">
                <image lazyLoad="true" mode="aspectFill" src="../../statics/image/load.gif"></image>
            </view>
        </view> -->
                <!-- </view> -->
                <!-- </view> -->
            </block>
        </block>
    </view>
</template>

<script>
export default {
    data() {
        return {
            vote: {
                vote_downtime_status: 0,
                hide_search_box: 0,
                hide_data_before: 0
            },

            rank_data: [],

            themeColor: {
                vrl: {
                    bg: '',

                    top_three: {
                        wing: ''
                    }
                }
            },

            rank_load: false,
            vote_load: 0,

            live: {
                ljrq_status: 0,
                ljrq_show_type: 0,
                vote_totle_count: '',
                vote_totle_nums: '',
                viewer_count: '',
                id: 0,
                tou_djs_status: 0,
                tou_djs_text: '',
                token: ''
            },

            columnsurs: {
                special: '',
                card1: '',
                card2: '',
                card3: '',
                zan: ''
            },

            color_one: '',
            color_three: '',
            counts: '',
            nums: '',
            color_status: '',
            themes: '',
            is_vote_tab: 0,
            columnsurs_selected: '',
            vote_data: [],
            is_vote_num: 0,
            article_intro_content: ''
        };
    },
    methods: {
        votesearch() {
            console.log('占位：函数 votesearch 未声明');
        },

        search() {
            console.log('占位：函数 search 未声明');
        },

        bindvotetab() {
            console.log('占位：函数 bindvotetab 未声明');
        },

        bindopenvote() {
            console.log('占位：函数 bindopenvote 未声明');
        }
    }
};
</script>
<style>
@import './vote.css';
</style>
